

<!DOCTYPE>
<html>
<head>
<title>Q.Tabs | Q.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 使用QLib控件是必须包含样式表 -->
<link type="text/css" rel="stylesheet" href="../ui.css" />
<style>
.q-tabs.property {
  background: #CCC;
}

.q-tabs.property .q-panel {
  background: #F8F8F8;
}

.q-tabs-header {
  background-color: blue;
  height: 100%;
}


.q-tabs.v-property {

}



.q-tabs.v-property .q-tabs-header {
  float: left; 
  width: 150px;

}

.q-tabs.v-property .q-tabs-header ul {
  padding: 0 0 0 5px;
  list-style: none;
}

.q-tabs.v-property .q-tabs-header ul li {
  text-indent: 10px;
  line-height: 30px;
  height: 30px;
  margin-bottom: 3px;
}        

.q-tabs.v-property .q-tabs-header ul li:hover, .q-tabs.v-property .q-tabs-header ul li.q-selected {
  background-color: white;
}





.q-tabs-body {
  margin-left: 150px;
  height: 100%;
  background-color: yellow;
}



.clearboth {
  clear: both;
}

</style>
<!--  
提示：src="{QLib目录}/Q.js" 
根据实际存放路径， 测试代码都是在QLib目录的samples文件夹下，所以这里用的是"../Q.js" 
-->
<script type="text/javascript" src="../src/Q.js"></script>
<script type="text/javascript" src="../src/tabs.js"></script>

<script>
<!--

Q.ready(function() {


var t = new Q.tabs({
    action: "mouseover",
    active: Q.$('tab-1'),
    items: [
      {tab: Q.$('tab-1'), content: Q.$('panel-1')},
      {tab: Q.$('tab-2'), content: Q.$('panel-2')},
      {tab: Q.$('tab-3'), content: Q.$('panel-3')},
      {tab: Q.$('tab-4'), content: Q.$('panel-4')},
    ]  
  });


function set_location( name ) {
var stateObject = {};
var title = "Wow Title";
var newUrl = "#" + name;
history.pushState(stateObject,title,newUrl);
}

var t2 = new Q.tabs({
    action: "click",
    active: Q.$('tab-1-1'),
    onactive: function( tid ) {
      console.log( tid );
      set_location( tid.id ); 
    },

    items: [
      {tab: Q.$('tab-1-1'), content: Q.$('panel-1-1')},
      {tab: Q.$('tab-1-2'), content: Q.$('panel-1-2')},
      {tab: Q.$('tab-1-3'), content: Q.$('panel-1-3')},
      {tab: Q.$('tab-1-4'), content: Q.$('panel-1-4')},
    ]  
  });


});

-->
</script>
</head>
<body onselectstart="return false;" style="overflow:hidden;-moz-user-select:none;-webkit-user-select: none;">
<h3>Q.Tabs samples </h3>
<hr/>
<br/>
<div class="q-tabs v-property" style="height: 350px;">

<div class="q-tabs-header">
	<ul>
		<li id="tab-1-1" href="javascript:;"> Tab1 </li>
		<li id="tab-1-2" href="javascript:;"> Tab2 </li>
		<li id="tab-1-3" href="javascript:;"> Tab3 </li>
		<li id="tab-1-4" href="javascript:;"> Tab4 </li>
	</ul>
</div>
<div class="q-tabs-body">
<div id="panel-1-1" class="q-panel">
  <div>Tab1 Panel</div>
</div>
<div id="panel-1-2" class="q-panel">Tab2 Panel</div>
<div id="panel-1-3" class="q-panel">Tab3 Panel</div>
<div id="panel-1-4" class="q-panel">Tab4 Panel</div>
</div>


</div>
<div class="clearboth" ></div>


<br/>
<br/>

<hr/>
<div class="q-tabs property">

<div class="q-tabs-header">
&nbsp;
<a id="tab-1" href="javascript:;"> Tab1 </a>
<a id="tab-2" href="javascript:;"> Tab2 </a>
<a id="tab-3" href="javascript:;"> Tab3 </a>
<a id="tab-4" href="javascript:;"> Tab4 </a>
</div>

<div id="panel-1" class="q-panel">
  <div>Tab1 Panel</div>
</div>
<div id="panel-2" class="q-panel">Tab2 Panel</div>
<div id="panel-3" class="q-panel">Tab3 Panel</div>
<div id="panel-4" class="q-panel">Tab4 Panel</div>

</div>

<br/>




<br/>
<br/>
</body>
</html>




